<template>
  <ul class="_m-2">
    <router-link :to="'/books/detail/' + books.id" tag="li" class="p-2 border-bottom" v-for="books in bookList" :key="books.id">
      <div class="book-cover">
        <img v-lazy="books.booksVo.booksCover" alt="books cover" />
      </div>
      <div class="book-info d-flex  flex-direction-column">
        <h3>
          {{books.booksVo.booksName}}
        </h3>
        <p>{{books.booksVo.author}}</p>
        <div class="outer">
          <p class="text">{{books.booksVo.booksDescription}}</p>
        </div>
        <div class="book-tag">
          <span class="lz" v-if="books.booksVo.isOver == isOver.No_Over">连载</span>
          <span class="wj" v-else>完结</span>
          <span v-for="sortVo in books.booksVo.sortVoList" :key="sortVo.id">{{sortVo.sortName}}</span>
        </div>
      </div>
    </router-link>
  </ul>
</template>

<script>
import {config} from 'assets/js/data'
export default {
  name: "BookList",
  props: {
    bookList: Array
  },
  data () {
    return {
      isOver : config.isOver
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

ul {
  background #FFF
  li {
    display: -webkit-box;

    .book-cover {
      width: 20vw;
      height: 26vw;
      position: relative;
      overflow: hidden;

      img {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        height: 100%;
      }
    }

    .book-info {
      margin-left: 8px;
      -webkit-box-flex: 1;

      h3 {
        color: #333;
        font-size: 16px;
        line-height: 16px;
        ellipsis();
      }

      p {
        font-size: 14px;
        line-height: 14px;
        color: #999;
        margin-top: 5px;
        max-height: 100%;
        ellipsis2();
      }

      div.outer {
        // height: 13vw;
        line-height: 16px;

        p.text {
          line-height: 18px;
        }
      }

      .book-tag {
        margin-top: 3px;

        span {
          font-size: 12px;
          height: 14px;
          line-height: 14px;
          border: 1px solid rgba(153, 153, 153, 0.3);
          border-radius: 2px;
          padding: 0 5px;
          margin-right: 5px;
          color: #999;
          display: inline-block;

          &.lz {
            color: #499fff;
            border-color: rgba(73, 159, 255, 0.3);
          }

          &.wj {
            color: #00c98d;
            border-color: rgba(0, 201, 141, 0.3);
          }
        }
      }
    }
  }
}
</style>
